<template>
  <ul class="product-container-box">
    <li class="product-item">
      <a href="javascript:void(0);" class="product-item-link flex">
        <!--图片-->
        <span class="link-img flex flex-align-center">
          <img class="img-item"
               src="https://img.alicdn.com/imgextra/i3/1882809736/O1CN01V0YGSL2Ln8fPBS01L_!!1882809736.jpg_250x250.jpg"
               alt=""/>
        </span>
        <!--详情-->
        <div class="link-container-box">
          <!--第一排-->
          <div class="link-item">
            <span class="link-icon tm"></span>
            <span class="link-icon tb"></span>
            <p class="link-title">
              【推荐】【3金冠老店，连续115期金牌卖家】儿童钻石贴画，母亲节幼儿园手工diy制作材料包，小小钻石画，工具齐全，简易操作，款式多选，开发儿童智力，培养专注力！【亲宝贝】</p>
          </div>

          <!--第二排-->
          <div class="preferential-item flex flex-align-center">
            <span class="preferential num">60元代金券</span>
            <span class="preferential total">已售42454件</span>
          </div>

          <!--第三排-->
          <div class="share-item">
            <span class="share-line">
              <span class="share-symbol">￥</span>
              <span class="share-money">59</span>
            </span>
            <span class="share-line">
              <span class="share-text">￥69.3</span>
            </span>
          </div>
          <span class="share-replay-btn num">预计返利 3.85 元</span>
        </div>
      </a>
    </li>

    <li class="product-item">
      <a href="javascript:void(0);" class="product-item-link flex">
        <!--图片-->
        <span class="link-img flex flex-align-center">
          <img class="img-item"
               src="https://img.alicdn.com/imgextra/i2/4130791249/O1CN01CEplcu1L65GijK2ZQ_!!4130791249.jpg_250x250.jpg"
               alt=""/>
        </span>
        <!--详情-->
        <div class="link-container-box">
          <!--第一排-->
          <div class="link-item">
            <span class="link-icon tm"></span>
            <span class="link-icon tb"></span>
            <p class="link-title">【泰圣元】红豆薏米茶芡实茶150g</p>
          </div>

          <!--第二排-->
          <div class="preferential-item flex flex-align-center">
            <span class="preferential num">60元代金券</span>
            <span class="preferential total">已售42454件</span>
          </div>

          <!--第三排-->
          <div class="share-item">
            <span class="share-line">
              <span class="share-symbol">￥</span>
              <span class="share-money">8.8</span>
            </span>
            <span class="share-line">
              <span class="share-text">￥18.3</span>
            </span>
          </div>
          <span class="share-replay-btn num">预计返利 3.85 元</span>
        </div>
      </a>
    </li>
  </ul>
</template>

<script>
export default {
  name: 'test3',
  data () {
    return {
      title: '标题三'
    }
  }
}
</script>

<style scoped lang="less">
  .product-container-box {
    width: 100%;
    height: 95px;
    box-sizing: border-box;
    // li
    .product-item {
      height: 100%;
      // a标签
      .product-item-link {
        position: relative;
        width: 100%;
        height: 95px;
        box-sizing: border-box;
        // img
        .link-img {
          width: 90px;
          height: 90px;
          position: absolute;
          top: 2.5px;
          left: 2.5px;

          .img-item {
            width: 100%;
            height: 100%;
          }
        }

        // 详情
        .link-container-box {
          box-sizing: border-box;
          margin-left: 100px;
          line-height: 1;
          height: 100%;
          overflow: hidden;
          border-bottom: 1px solid #f1f1f1;

          .link-item {
            width: 100%;
            overflow: hidden;
            margin-top: 6px;
            margin-bottom: 6px;

            .link-icon {
              box-sizing: border-box;
              display: inline-block;
              height: 14px;
              width: 14px;
              float: left;
              margin-right: 4px;
              background-size: auto 14px;
              background-image: url(https://s2.li5.me/static/mobile/img/gicon.png);

              &.tm {
                background-position: 0px 0px;
              }

              &.tb {
                background-position: -60px 0px;
              }

              &.jin {
                background-position: -15px 0px;
              }

              &.jd {
                background-position: -151px 0px;
              }

              &.pdd {
                background-position: -135px 0px;
              }
            }

            .link-title {
              margin: 0;
              padding: 0;
              font-size: 14px;
              color: #4a4a4a;
              flex: 1 1 auto;
              min-width: 180px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
            }
          }

          .preferential-item {
            height: 18px;
            // 优惠
            .preferential {
              margin-right: 5px;
              display: inline-block;
              vertical-align: middle;
              line-height: 14px;
              position: relative;
              font-size: 12px;

              &.num {
                color: #f50;
                padding: 3px;
                border: 1px solid #f50;
                border-radius: 3px;
              }

              &.total {
                color: #9b9b9b;
              }
            }
          }

          .share-item {
            position: absolute;
            bottom: 5px;
            // 原价、优惠价
            .share-line {
              margin-right: 8px;
              margin-bottom: 0px;
              color: #9b9b9b;
              font-size: 12px;
              position: relative;

              .share-symbol {
                color: #ff5500;
              }

              .share-money {
                color: #ff5500;
                font-size: 18px;
              }

              .share-text {
                text-decoration: line-through;
                color: #9b9b9b;
              }
            }
          }
          // 返利
          .share-replay-btn {
            padding: 7px 15px;
            display: inline-block;
            position: absolute;
            bottom: 5px;
            right: 2px;
            border-radius: 5px;
            border: 1px solid #ff6633;
            font-size: 12px;

            &.num {
              color: #fff;
              background: #fe9602;
              background: -webkit-gradient(linear, 0 0, right 0, from(#fe9602), to(#ff6831));
              background: linear-gradient(linear, 0 0, right 0, from(#fe9602), to(#ff6831));
              border-color: #ff6633;
            }
          }
        }
      }
    }
  }
</style>
